<template>
	<view class="title" :style="`background-color:${titleBackground}`">
		<view class="title_center">
			<view class="title_center_item" @click.stop="leftClick">
				<uni-icons type="left" :size="lefticonSize" :color="color"></uni-icons>
			</view>
			<view class="title_center_item" style="text-align: center;" :style="`color:${color};font-size:${TextSize}`">
				{{text}}
			</view>
			<view class="title_center_item" @click.stop="rightClick">
				<uni-icons :type="rightType" :color="color" :size="lefticonSize"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		member
	} from '../api/wallet';
	export default {
		props: {
			TextSize: {
				type: Number,
				default: 50
			},
			textStyle: {
				type: String,
				default: ''
			},
			lefticonSize: {
				type: Number || String,
				default: 20
			},
			text: {
				type: String,
				default: ""
			},
			titleBackground: {
				type: String,
				default: ""
			},
			titleSize: {
				type: Number,
				default: 20
			},
			titleColor: {
				type: String,
				default: ''
			},
			rightType: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				Text: ''
			}

		},
		name: "appTitle",
		data() {
			return {

			};
		},
		methods: {
			leftClick() {
				this.$emit('leftClick');
			},
			rightClick() {
				this.$emit('rightClick');
			}
		}
	}
</script>

<style lang='scss' scoped>
	.title {
		width: 100vw;
		box-sizing: content-box;
		padding-top: var(--status-bar-height);
		/* position: fixed;
		top: 0;
		z-index: 10; */

		.title_center {
			height: 100rpx;
			line-height: 100rpx;
			width: 100%;
			display: flex;
			padding: 0 20rpx;

			.title_center_item {
				flex: 1;
			}

		}

		.placeholder {
			width: 100%;
			height: 100rpx;
			box-sizing: content-box;
			padding-top: var(--status-bar-height);
		}
	}
</style>